<template>
	<view class="ai-page">
		<view class="title">
			<u--image :showLoading="true" src="/static/home/home-title.png" width="257rpx" height="54rpx"></u--image>
		</view>
		<view class="balance">
			<view class="balance-top">
				<view class="top-left">
					<text>可用余额</text>
					<u--image @click="probe" v-if="eyeShow == true" :showLoading="true" src="/static/ai/eye0.png"
						width="36rpx" height="36rpx"></u--image>
					<u--image @click="probe" v-else="eyeShow == false" :showLoading="true" src="/static/ai/eye1.png"
						width="36rpx" height="36rpx"></u--image>
				</view>
				<view class="detail" @click="gonavto('/pages/my/detail/index')">
					查看明细
				</view>
			</view>
			<view class="balance-box">
				<view class="balance-item" v-for="(item,index) in balanceList" :key="index">
					<view class="item-text">
						{{item.text}}
					</view>
					<view class="item-num">
						{{item.num}}
					</view>
				</view>
			</view>
		</view>
		<view class="title">
			<u--image :showLoading="true" src="/static/ai/serve-title.png" width="181rpx" height="32rpx"></u--image>
		</view>
		<view class="serve">
			<view class="serve-item">
				<view class="item-title">
					AI聚能算力集成
				</view>
				<view class="item-text">
					不同算力资源集中汇聚，整合协同工作
				</view>
				<view class="btn" @click="gonavto('/pages/ai/shaped/index')">
					查看详情
				</view>
			</view>
			<view class="serve-item">
				<view class="item-title">
					AI算力池
				</view>
				<view class="item-text">
					多个AI计算设备集中链接，更高效执行任务
				</view>
				<view class="btn" @click="gonavto('/pages/ai/computing/index')">
					查看详情
				</view>
			</view>
		</view>
		<view class="income">
			<view class="income-text">
				实时累计收益率：
			</view>
			<view class="income-num">
				<text>670.58% </text>
				<u--image :showLoading="true" src="/static/ai/up.png" width="49.62rpx" height="23.44rpx"></u--image>
			</view>
		</view>
		<view class="container">
			<echarts ref="echarts" :option="option" canvasId="echarts"></echarts>
		</view>
		<tabbar :value="1"></tabbar>
	</view>
</template>

<script>
	import tabbar from '@/components/tabbar/index.vue'
	import echarts from '@/components/echarts-uniapp/echarts-uniapp.vue'
	export default {
		components: {
			tabbar,
			echarts
		},
		data() {
			return {
				eyeShow: false,
				option: {},
				balanceList: [{
						text: 'USDT',
						num: 0.00
					},
					{
						text: 'CBU',
						num: 0.00
					},
					{
						text: 'AIX',
						num: 0.00
					},
				],
				userinfo:{}
			}
		},
		onReady() {
			this.option = {
				title: {
					text: 'INDIW', // 主标题文本
					subtext: 'US100 CFD' // 副标题文本
				},
				textStyle: {
					color: '#333333', // 主标题文本颜色
					fontSize: 18, // 主标题字体大小
					fontWeight: 'bold' // 主标题字体粗细
				},
				subtextStyle: {
					color: '#999999', // 副标题文本颜色
					fontSize: 12 // 副标题字体大小
				},
				xAxis: {
					type: 'category',
					splitLine: {
						show: false
					},
					axisLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				},
				grid: {
					left: '2%', // 左边距
					right: '2%', // 右边距
					top: '30%', // 上边距
					bottom: '20%' // 下边距
				},
				yAxis: {
					type: 'value',
					splitLine: {
						show: false
					},
					itemStyle: {
						color: 'green'
					},
					axisLabel: { //设置标签颜色为透明
						color: 'transparent'
					},
				},
				series: [{
					data: [100, 300, 160, 120, 350, 120, 120, 170, 400, 300, 200],
					type: 'line',
					symbol: "none",
					lineStyle: {
						color: '#41C490' // 设置折线的颜色
					},
					areaStyle: {
						color: {
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 0.7,
							colorStops: [{
								offset: 0,
								color: '#41C490' // 起始颜色
							}, {
								offset: 1,
								color: 'rgba(65, 196, 144, 0)' // 结束颜色，透明度为0
							}],
						},
					}
				}]
			};
		},
		onLoad() {
			this.postinfo()
		},
		methods: {
			postinfo(){
				this.$Request({
					method: 'POST',
					url: '/user/getUserInfo'
				}).then(res => {
					if (res.data.code == 1) {
						this.userinfo = res.data.data
						this.balanceList[0].num = this.userinfo.usd
						this.balanceList[1].num = this.userinfo.cbu
						this.balanceList[2].num = this.userinfo.aix
					}
				})
			},
			probe() {
				this.eyeShow = !this.eyeShow
			},
			gonavto(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ai-page {
		padding: 30rpx;

		.container {
			width: 100%;
			height: 200px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 50rpx;
			padding: 20rpx;
			background-color: #f6faff;
			border-radius: 20rpx;
		}

		.title {
			padding: 30rpx 0;
		}

		.balance {
			height: 244rpx;
			margin-top: 20rpx;
			background-image: url('/static/ai/balance-bg.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			padding: 50rpx;
			border-radius: 50rpx;

			.balance-top {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.top-left {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-weight: 700;
					color: #333;

					text {
						margin-right: 20rpx;
					}
				}

				.detail {
					font-size: 24rpx;
					color: #ffffff;
					background-color: rgba(0, 0, 0, .18);
					padding: 10rpx 20rpx;
					border-radius: 30rpx;
				}
			}

			.balance-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;

				.balance-item {
					color: #333333;

					.item-text {
						font-size: 24rpx;
					}

					.item-num {
						font-size: 36rpx;
						font-weight: 700;
					}
				}
			}
		}

		.serve {
			display: flex;
			justify-content: space-between;

			.serve-item {
				width: 48%;
				height: 384rpx;
				padding: 40rpx 35rpx;
				background-image: url('/static/ai/serve-bg.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;

				.item-title {
					margin-top: 20rpx;
					border: 1rpx solid rgba(255, 255, 255, 0.5);
					padding: 15rpx 30rpx;
					color: #fff;
					font-size: 26rpx;
					border-radius: 30rpx;
					text-align: center;
				}

				.item-text {
					font-size: 24rpx;
					margin-top: 40rpx;
					color: #eee;
				}

				.btn {
					margin-top: 25%;
					width: 100%;
					padding: 10rpx 0;
					background-color: #ffffff;
					border-radius: 40rpx;
					text-align: center;
					font-size: 28rpx;
				}
			}
		}

		.income {
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
			background-color: #F6FAFF;
			padding: 30rpx;
			border-radius: 20rpx;
			font-size: 28rpx;

			.income-text {
				color: #999999;
			}

			.income-num {
				font-weight: 500;
				color: #FF5454;
				display: flex;
				align-items: center;

				text {
					margin-right: 20rpx;
				}
			}
		}
	}
</style>